import React, { PureComponent, Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Avatar,
  Checkbox,
  Rate,
  Progress,
  Button,
  Dropdown,
  Row,
  Col,
  Modal,
  Collapse,
  List,
  Radio,
  Upload,
  Tooltip,
  message,
  InputNumber,
} from 'antd';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    span: 24,
  },
  wrapperCol: {
    span: 24,
  },
};

@connect(({ risk, apply }) => ({
  risk,
  apply,
}))
@Form.create()
export default class RepaymentAbilityEditor extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      otherPayMonth: 0,
      id: '',
      applyDisabled: '',
    };
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    // const params = querystring.parse(location.search.slice(1));
    const { apply: { applyListDetails, applyLoading } } = this.props;
    const { ability, business } = applyListDetails;
    this.setState({
      id: this.props.id,
      applyDisabled: this.props.applyDisabled,
      otherPayMonth: applyListDetails && ability.otherPayMonth,
    });
  }

  handleSaveAbility = () => {
    const { dispatch } = this.props;
    const { validateFieldsAndScroll } = this.props.form;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        // console.log('values', values);
        dispatch({
          type: 'apply/saveAbility',
          payload: {
            id: this.props.projectId,
            otherPayMonth: this.state.otherPayMonth,
            ...values,
          },
          callback: () => {
            const { apply: { applyResult } } = this.props;
            if (applyResult.code == 200) {
              message.success('提交成功');
              dispatch({
                type: 'apply/detailsApply',
                payload: {
                  projectId: this.props.projectId,
                },
              });
            } else {
              message.error(applyResult.message);
            }
          },
        });
      }
    });
  };
  handleOtherPayMonth = value => {
    if (value) {
      this.setState({ otherPayMonth: value });
    } else {
      this.setState({ otherPayMonth: 0 });
    }
  };

  render() {
    const { risk, isForFamilyMember } = this.props;
    const { customers } = risk;
    const { apply: { applyListDetails, applyLoading } } = this.props;
    const { ability, business } = applyListDetails;
    const { getFieldDecorator, getFieldValue, validateFieldsAndScroll } = this.props.form;
    const { applyDisabled } = this.props;
    const loanPeriod = sessionStorage.getItem('loanPeriod');

    return (
      <Form>
        {/* {JSON.stringify(ability)} */}
        <Card type="inner" title="收入信息">
          <Row gutter={16}>
            <Col span={8}>
              <FormItem label="月收入" {...formItemLayout}>
                <InputNumber disabled style={{ width: '100%' }} value={ability.majorIncome} />
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem label="共还月收入" {...formItemLayout}>
                <InputNumber disabled style={{ width: '100%' }} value={ability.jointlyIncome} />
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem label="本次贷款月供" {...formItemLayout}>
                <InputNumber disabled style={{ width: '100%' }} value={ability.payMonth} />
              </FormItem>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={8}>
              <FormItem label="其它贷款月供" {...formItemLayout}>
                <InputNumber
                  onChange={this.handleOtherPayMonth}
                  value={this.state.otherPayMonth}
                  style={{ width: '100%' }}
                  disabled={applyDisabled}
                />

                {/* {getFieldDecorator('otherPayMonth', {
                  initialValue: this.state.otherPayMonth
                })(                  
                  //  <InputNumber
                  // style={{ width: '100%' }}
                  // disabled={applyDisabled}
                  // onChange={this.handleOtherPayMonth} />
                  )} */}
              </FormItem>
            </Col>
          </Row>
          <FormItem label="其他负债情况" {...formItemLayout}>
            {getFieldDecorator('otherDeptNote', {
              initialValue: ability.otherDeptNote,
            })(<TextArea rows={4} disabled={applyDisabled} />)}
          </FormItem>
          <Row gutter={16}>
            <Col span={8}>
              <FormItem label="收入还贷比(本次)" {...formItemLayout}>
                {getFieldDecorator('payMonth000', {
                  //本次贷款月供/(月收入+共还月收入)=收入还贷比(本次)
                  initialValue:
                    ability.payMonth &&
                    ability.majorIncome &&
                    (
                      Number(ability.payMonth) /
                      (Number(ability.majorIncome) + Number(ability.jointlyIncome)) *
                      100
                    ).toFixed(2),
                })(
                  <InputNumber
                    min={0}
                    // max={100}
                    style={{ width: '100%' }}
                    disabled
                    formatter={value => `${value}%`}
                    disabled
                  />
                )}
              </FormItem>
            </Col>
            {/* 本次贷款月供{JSON.stringify(ability.payMonth)}==
            其他贷款月供{JSON.stringify(Number(this.state.otherPayMonth))}==
            月收入{JSON.stringify(ability.majorIncome)}==
            共还月收入{JSON.stringify(ability.jointlyIncome)}== */}
            <Col span={8}>
              <FormItem label="收入还贷比(全部)" {...formItemLayout}>
                {getFieldDecorator('otherPayMonth000', {
                  //(本次贷款月供+其他贷款月供)/(月收入+共还月收入)=收入还贷比(全部)
                  initialValue:
                    ability.payMonth &&
                    ability.majorIncome &&
                    (
                      (Number(ability.payMonth) + Number(this.state.otherPayMonth)) /
                      (Number(ability.majorIncome) + Number(ability.jointlyIncome)) *
                      100
                    ).toFixed(2),
                })(
                  <InputNumber
                    min={0}
                    // max={100}
                    style={{ width: '100%' }}
                    disabled
                    formatter={value => `${value}%`}
                    disabled
                  />
                )}
              </FormItem>
            </Col>
          </Row>
          <FormItem label="其他资产情况" {...formItemLayout}>
            {getFieldDecorator('otherAssetNote', {
              initialValue: ability.otherAssetNote,
            })(<TextArea rows={4} disabled={applyDisabled} />)}
          </FormItem>
        </Card>
        <FormItem
          style={{ marginLeft: '30px', marginTop: '30px' }}
          wrapperCol={{ span: 21, offset: 3 }}
          label=""
        >
          {applyDisabled ? (
            ''
          ) : (
            <Button type="primary" onClick={this.handleSaveAbility} loading={applyLoading}>
              保存
            </Button>
          )}
        </FormItem>
      </Form>
    );
  }
}
